<template>
  <div class="message-list">
    <template v-if="messages.length">
      <div v-for="msg in messages" :key="msg.messageId" class="message-item" @click="handleMessageClick(msg)">
        <div class="message-item__tags">
          <el-tag size="small" :type="msg.priority">{{ msg.messagePriorityText }}</el-tag>
          <el-tag size="small" type="info">{{ msg.messageTypeText }}</el-tag>
        </div>
        <div class="message-item__main">
          <div class="message-item__header">
            <div class="message-item__footer">
                <div class="message-item__title">{{ msg.messageTitle }}</div>
                <span class="message-item__time">{{ msg.messageTime }}</span>
                <div class="message-item__actions">
                <el-button v-if="msg.messageStatus == 0" type="primary" link size="small" @click.stop="markAsRead(msg)">标记已读</el-button>
                <el-button type="danger" link size="small" @click.stop="deleteMsg(msg)">删除</el-button>
                </div>
            </div>
          </div>
          <div class="message-item__content">{{ msg.messageContent }}</div>
        </div>
      </div>
    </template>
    <el-empty v-else description="暂无消息" />
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { markMessageRead, deleteMessage } from '@/api/system/message'

const props = defineProps<{
  messages: any[]
}>()

const emit = defineEmits(['update'])

// 点击消息
const handleMessageClick = async (msg: any) => {
  if (msg.messageStatus == 0) {
    try {
        await markMessageRead(msg.messageId)
        emit('update')
    } catch (error) {
        console.error('标记已读失败:', error)
    }
  }
  
  ElMessage.error('需补充跳转对应业务页面的逻辑')
}

// 标记消息为已读
const markAsRead = async (msg: any) => {
  try {
    await markMessageRead(msg.messageId)
    ElMessage.success('已标记为已读')
    emit('update')
  } catch (error) {
    console.error('标记已读失败:', error)
  }
}

// 删除消息
const deleteMsg = async (msg: any) => {
  try {
    await ElMessageBox.confirm('确认要删除该消息吗？')
    await deleteMessage(msg.messageId)
    ElMessage.success('删除成功')
    emit('update')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除消息失败:', error)
    }
  }
}
</script>

<style lang="scss" scoped>
.message-list {
  .message-item {
    display: flex;
    padding: 5px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    cursor: pointer;

    &:hover {
      background-color: var(--el-color-primary-light-9);
    }

    &__tags {
      margin-right: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    &__main {
      flex: 1;
    }

    &__header {
      margin-bottom: 8px;
    }

    &__title {
      font-size: 14px;
      font-weight: 500;
    }

    &__content {
      font-size: 13px;
      color: var(--el-text-color-regular);
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    &__footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &__time {
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }

    &__actions {
      display: flex;
      gap: 8px;
    }
  }
}
</style>